<template>
  <div class="my-comment-box">
    <template v-if="rows.length">
      <div v-for="(item, index) in rows" :key="index" class="comment-card-box">
        <el-badge value="未读消息" class="item" :hidden="item.status!==1?false:true">
          <div class="card-left">
            <div class="date">{{ formatListDate(item.createTime) }} {{ item.sendNickName }} 通过 {{ item.title }}
              给您发以下消息
            </div>
            <p v-dompurify-html="item.content" :title="item.content" @click="toDetail(item)"></p>
          </div>
        </el-badge>
        <div class="card-right" title="删除消息" @click="remove(item)">
          <svg-icon icon-name="icon-shanchu1" color="#a3abb1" size="20px"></svg-icon>
        </div>

      </div>
    </template>

    <!-- 无数据页 -->
    <template v-else>
      <div class="audit-no-data-box">
        <no-data-vue width="200px" height="200px"></no-data-vue>
      </div>
    </template>

    <!-- 分页组件 -->
    <Pagination
        v-if="total > pageSize"
        :limit="pageSize"
        :total="total"
        :current-page="currentPage"
        @handle-current-change="handleCurrentChange"
    ></Pagination>

  </div>
</template>
<script lang="ts" setup>
import {getMessageLogPage, setMessageRead, setAllMessageRead, deleteMessageLog} from '@/http/api/messagelog';
import {formatListDate} from '@/utils/common';
import NoDataVue from '@/components/NoData/NoData.vue';
import {toCommentDetail} from "@/utils/commentToDetail";
import {ElMessageBox} from "element-plus";
// 查询用户积分记录
const rows = ref<Array<any>>([]);
const pageNum = ref<number>(1);
const pageSize = ref<number>(8);
const total = ref<number>(0);
const currentPage = ref<number>(1);
const isShowSkeleton = ref<boolean>(true);
const getMessageLogPageAsync = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    orderByColumn: 'createTime',
    isAsc: 'desc'
  };
  const data = await getMessageLogPage(params);
  if (data.code === 200) {
    rows.value = data.rows;
    total.value = data.total;
    currentPage.value = pageNum.value;
    isShowSkeleton.value = false;
  } else {
    isShowSkeleton.value = false;
    ElMessage.error(data.msg);
  }
};
getMessageLogPageAsync();
const remove = async (item: any) => {
  ElMessageBox.confirm('确认删除该消息吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(async () => {
        let params = {
          id: item.id
        };
        const data = await deleteMessageLog(params);
        if (data.code === 200) {
          if (total.value > 0 && (total.value - 1) % total.value == 0) {
            pageNum.value = pageNum.value - 1;
          }
          await getMessageLogPageAsync();
          ElMessage.success('删除成功');
        } else {
          ElMessage.error(data.msg);
        }
      })
      .catch(() => {
      });

};
// 改变页码时
const handleCurrentChange = (currentPage: number) => {
  pageNum.value = currentPage;
  getMessageLogPageAsync();
};
// 跳转至评论详情
const router = useRouter();
const toDetail = (item: any) => {
  // 消息已读
  let params = {
    msgId: item.id
  };
  setMessageRead(params);
  toCommentDetail(item, router);
};
</script>
<style lang="scss" scoped>
.my-comment-box {
  .comment-card-box {
    width: 100%;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0px 4px 4px 2px rgb(0 37 58 / 8%);
    }

    .card-left {
      flex: 1;
      display: flex;
      flex-direction: column;

      .date {
        font-size: 12px;
        color: #a3abb1;
      }

      p {
        font-size: 14px;
        color: #333;
        height: 30px;
        line-height: 30px;
        width: 700px;
        background-color: rgba(242, 242, 242, 0.5);
        margin: 10px 0;
        border-radius: 5px;
        padding-left: 10px;
        text-align: justify;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          color: #00c091;
        }
      }

      .comment-likes {
        display: flex;
        align-items: center;
        color: #a3abb1;

        .svg-icon {
          margin-right: 5px;
        }
      }
    }

    .card-right {
      width: 50px;
      height: 50px;
      border: 1px solid #eee;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background-color: rgba($color: #00c091, $alpha: 0.1);
      }
    }
  }
}
</style>
